<!-- 保险公司编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="800"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="交强险" prop="qx_price">
        <el-input v-model="form.qx_price" disabled style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="车船税" prop="tax_price">
        <el-input v-model="form.tax_price" disabled style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="商业险" prop="syx_price">
        <el-input v-model="form.syx_price" disabled style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="其他保险" prop="qtx_price">
        <el-input v-model="form.qtx_price" disabled style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="分期手续费" prop="fenqi_charge_amount">
        <el-input
          v-model="form.fenqi_charge_amount"
          disabled
          style="width: 200px"
        >
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="管理费" prop="glf_paid">
        <el-input v-model="form.glf_price" style="width: 200px" disabled>
          <template #append>元</template>
        </el-input>
        <el-input
          v-model="form.glf_note"
          style="width: 300px"
          class="ml8"
          placeholder=""
          disabled
        />
      </el-form-item>
      <el-form-item label="GPS费" prop="gps_paid">
        <el-input v-model="form.gps_price" style="width: 200px" disabled>
          <template #append>元</template>
        </el-input>
        <el-input
          v-model="form.gps_note"
          style="width: 300px"
          class="ml8"
          placeholder=""
          disabled
        />
      </el-form-item>
      <el-form-item label="二保费" prop="eb_paid">
        <el-input v-model="form.eb_price" style="width: 200px" disabled>
          <template #append>元</template>
        </el-input>
        <el-input
          v-model="form.eb_note"
          style="width: 300px"
          class="ml8"
          placeholder=""
          disabled
        />
      </el-form-item>
      <el-form-item label="学习费" prop="xx_paid">
        <el-input v-model="form.xx_price" style="width: 200px" disabled>
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="盖章费" prop="gz_paid">
        <el-input v-model="form.gz_price" style="width: 200px" disabled>
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="法务费" prop="fw_paid">
        <el-input v-model="form.fw_price" style="width: 200px" disabled>
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="其他费用">
        <div
          v-for="item in form.qtList"
          :key="item.id"
          style="margin-bottom: 8px"
        >
          <el-input v-model="item.title" style="width: 200px" disabled>
            <template #prepend>费用名</template>
          </el-input>
          <el-input
            v-model="item.price"
            style="width: 120px"
            class="ml8"
            disabled
          >
            <template #append>元</template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="总计应收" prop="price">
        <el-input v-model="form.price" disabled style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="实收" prop="paid">
        <el-input
          v-model="form.paid"
          style="width: 200px"
          :disabled="props.data.status == 200"
        >
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="垫付" prop="dianfu_amount">
        <el-input v-model="form.dianfu_amount" disabled style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="分期" prop="fenqi_benjin">
        <el-input v-model="form.fenqi_benjin" disabled style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="差价" prop="diff_price">
        <el-input v-model="diff_price" disabled style="width: 200px">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="差价处理方式"
        prop="diff_price_type"
        v-if="diff_price != 0"
      >
        <el-radio-group v-model="form.diff_price_type">
          <el-radio-button
            v-for="item in diffPriceType"
            :key="item"
            :label="item"
          >
            {{ item }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="付款时间">
        <el-date-picker
          v-model="form.pay_time"
          class="filter-item"
          type="datetime"
          placeholder="付款时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 230px"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="付款图片" prop="pay_images">
        <image-upload
          :limit="99"
          v-model="form.pay_images"
          :read-only="props.data.status == 200"
        />
      </el-form-item>
    </el-form>
    <template v-if="props.data.status == 0" #footer>
      <el-button @click="updateModelValue(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        复核完成
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, watch, computed } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { updateTradePaid, getTradeById } from '@/api/company';
  import ImageUpload from '@/components/ImageUpload/index.vue';
  import { jsJiafa } from '@/utils/my-common';

  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    data: Object
  });

  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);

  /** 表单验证规则 */
  const rules = reactive({
    title: [
      {
        required: true,
        message: '请输入保险公司名称',
        type: 'string',
        trigger: 'blur'
      }
    ]
  });

  const form = ref({});
  const paid = computed(() => {
    var paid = 0;
    paid = jsJiafa(paid, form.value.paid);
    paid = jsJiafa(paid, form.value.dianfu_amount);
    paid = jsJiafa(paid, form.value.fenqi_benjin);

    return paid;
  });
  // 差价
  const diff_price = computed(() => {
    var diff = 0;
    diff = paid.value - form.value.price;
    return diff.toFixed(2);
  });
  const checkDiffType = () => {
    var res = true;
    if (diff_price.value == 0) return true;
    if (diff_price.value > 0) {
      if (
        form.value.diff_price_type != '利润' &&
        form.value.diff_price_type != '返还'
      )
        return false;
    }
    if (diff_price.value < 0) {
      if (
        form.value.diff_price_type != '欠款' &&
        form.value.diff_price_type != '优惠'
      )
        return false;
    }
    return res;
  };
  /** 保存编辑 */
  const save = () => {
    console.log(form);
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      if (!checkDiffType()) {
        EleMessage.warning('请选择差价的处理方式');
        return;
      }
      var requestData = Object.assign({}, form.value);
      console.log(requestData, '是什么');
      requestData.qtList = '';
      requestData.payImages = '';
      requestData.action = '复核收款金额';
      requestData.diff_price = diff_price.value;
      if (diff_price.value == 0) requestData.diff_price_type = '';
      updateTradePaid(requestData)
        .then((msg) => {
          EleMessage.success(msg);
          updateModelValue(false);
          emit('done');
        })
        .catch((e) => {
          console.log(e);
        });
    });
  };

  // 差价处理方式
  const diffPriceType = computed(() => {
    var list = [];
    if (diff_price.value > 0) {
      list = ['利润', '返还'];
    }
    if (diff_price.value < 0) {
      list = ['优惠', '欠款'];
    }
    return list;
  });

  const getTradeDetail = () => {
    getTradeById({ id: props.data.relation_id })
      .then((res) => {
        form.value = res;
        diff_price.value = res.diff_price;
        title.value = form.value.plate_number + '出单详情';
      })
      .catch((e) => {
        EleMessage.error(e.message);
      });
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };
  const title = ref('');

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        getTradeDetail();
      } else {
        formRef.value?.clearValidate?.();
      }
    }
  );
</script>
